<template>
  <a-modal
    title="选择产品组"
    :visible="visible"
    :maskClosable="false"
    :width="1000"
    @cancel="handleCancel"
  >
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      @change="handleTableChange"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        type: 'radio',
      }"
    />
    <template slot="footer">
      <a-button type="primary" @click="handleOk">
        保存
      </a-button>
      <a-button @click="handleCancel">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { DATA_CODE_SUCCESS } from '@/utils/consts';
import { request, METHOD } from '@/utils/request';

const API_BASE_URL = require('@/services/baseUrl')

export default {
  name: 'productModal',
  data() {
    return {
      visible: false,
      oriData: {},
      columns: [],
      dataSource: [],
      selectedRowKeys: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        showTotal: (val) => `共 ${val} 条记录 第 ${this.pagination.current} / ${Math.ceil(this.pagination.total / this.pagination.pageSize)} 页`
      }
    };
  },
  methods: {
    show(columns, oriData) {
      this.columns = columns;
      this.oriData = oriData;
      this.visible = true;
      this.selectedRowKeys = [];
      this.getList();
    },
    async handleOk() {
      if (this.selectedRowKeys.length) {
        const data = await this.getProductDetail(this.dataSource[this.selectedRowKeys[0]]);
        if (data) {
          const dataCombine = Object.assign(
            this.dataSource[this.selectedRowKeys[0]],
            data
          );
          this.visible = false;
          this.$emit(
            'selectData',
            dataCombine,
            this.oriData.option,
            this.oriData.item,
            this.oriData.key
          );
        } else {
          this.$message.error('产品详情查询失败!');
        }
      } else {
        this.$message.error('请选择一项产品!');
      }
    },
    handleCancel() {
      this.visible = false;
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination) {
      this.selectedRowKeys = [];
      Object.assign(this.pagination, pagination);
      this.getList();
    },
    async getProductDetail(data) {
      const params = Object.assign(data, this.oriData.params);
      const response = await request(
        API_BASE_URL + this.oriData.item.actionUrl,
        METHOD.GET,
        params
      );
      return response.data.code === DATA_CODE_SUCCESS
        ? response.data.data
        : null;
    },
    async getList() {
      const { current, pageSize } = this.pagination;
      const params = { pageNum: current, pageSize, ...this.oriData.params };
      const response = await request(
        API_BASE_URL + this.oriData.item.dataUrl,
        METHOD.GET,
        params
      );
      if (response.data.code === DATA_CODE_SUCCESS) {
        this.dataSource = response.data.data.records;
        this.pagination.total = response.data.data.total;
      }
    }
  }
};
</script>
